// 类组件
import React, { Component } from 'react'
// Route 定义路由规则所用
// Link/NavLink 声明式导航  NavLink它有激活样式  统一编译出来的html都为a标签
// Switch 它只会匹配成功一次，后续就不会继续匹配
// Redirect 重定向
import { Route, Redirect } from 'react-router-dom'

import Render from './views/Render'
import Login from './views/Login'

class App extends Component {
  // 私有状态，只有当前组件可以使用
  state = {
    num: 100
  }

  render() {
    return (
      <div>
        <h3>{this.state.num}</h3>
        <button
          onClick={() => {
            this.setState(state => ({
              num: state.num + 1
            }))
          }}
        >
          ++++
        </button>
        <hr />
        <Route path="/login" component={Login} />
        {/* 
          component类渲染方式
          1.它会自动的把路由对象映射到渲染组件的props属性中
          2.类在路由规则匹配的环境中不能写业务判断，如当前页面只有登录才能访问，它不可写判断
          3.它不会重复去创建渲染组件
        */}
        {/* <Route path="/rd" component={Render} /> */}

        {/* 
          component函数渲染方式
          componenet使用回调函数的方式，则一定要返回一个jsx对象
          1.函数的方式，则需要你手动的把router对象传入到渲染组件的props属性中
          2.函数的方式，它可以在匹配规则后，进行对应的业务判断，如果满足则渲染
          3.当前路由宿主中有数据变化后，它则会销毁之前的组件再重新创建一个新的组件，性能较差
        */}
        {/* <Route
          path="/rd"
          component={router => {
            // 在路由规则匹配成功后，还可以进行别的业务判断
            if ('?username=admin' === router.location.search) {
              return <Render {...router} />
            } else {
              // return <div>你没有权限</div>
              // 如果你没有权限则跳转到登录页
              return <Redirect to="/login" />
            }
          }}
        /> */}

        {/* 
          render渲染方式，它集合了component类和函数组件中的优点 
          render渲染方式，需要手动的传递路由对象给渲染的组件的props属性中
        */}
        {/* <Route
          path="/rd"
          render={router => {
            // 在路由规则匹配成功后，还可以进行别的业务判断
            if ('?username=admin' === router.location.search) {
              return <Render {...router} />
            } else {
              return <div>你没有权限</div>
            }
          }}
        /> */}

        {/* 
          children渲染方式
          一、jsx方式  精确匹配方式 当前path必须和地址栏地址一样时才来渲染
          children的jsx方式，默认情况下它没有返回给所匹配的渲染组件中this.props中注入路由对象，所以一般不用
        */}
        {/* <Route path="/rd" children={<Render />} /> */}

        {/* 
          二、回调函数方式：全匹配，它渲染不关心当前的path和地址栏规则是否一致，它都会渲染出来
          如果当前地址栏中的地址和path路径要是一致时，则router对象中的match属性则为对象，如果不匹配则为null
        */}
        {/* <Route
          path="/rd"
          children={router => {
            console.log(router.match)
            return <Render {...router} />
          }}
        /> */}
        <Route
          path="/rd"
          children={router => {
            console.log(router);
            if (router.match) {
              return <Render {...router} />
            }
            return <div>没有找到</div>
          }}
        />
      </div>
    )
  }
}

export default App
